<template lang="html">
  <div class="goodsdetails_box">
    <ul class="orderdetails_main">
      <li class="shipment" v-for='item in goodsname'>
        <div class="shopName">
            <h2 class="orderNumber">订单号:{{item.banhao}}</h2>
            <h3 class="orderStatus">待发货</h3>
        </div>
        <div class="commodity">
          <router-link to="/">
            <img :src="item.imgurl" :alt="goodsname.title" class="goods_img">
            <p class="goodsname_main">{{item.title}}</p>
            <p class="goods_pirce">￥{{item.price}}</p>
            <p class="goods_num">*{{item.numer}}</p>
          </router-link>
        </div>
        <h2 class="total">共件商品{{item.numer}}  合计：￥<span>{{item.Total}}</span></h2>
        <div class="operation">
            <h3 class="update">升级</h3>
            <h3 class="notsj_btn">提货</h3>
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
  export default {
    props:['goodsname'],
  }
</script>
<style type="text/css" lang="less">
  @import '../../../assets/less/index.less';
  .goodsdetails_box{
    width: 100vw;
    margin-top: 2vw;
    .orderdetails_main{
      width: 100vw;
      .shipment{
        width:100%;
        margin: 3vw auto 0 auto; 
        border-top: solid 1px @color8;
        box-shadow: 0px 10px 10px @color8;
        .shopName,.commodity{
          width:@width;
          margin: 0 auto;
          border-bottom: solid 1px @color8;
          overflow: hidden;
          zoom:1;
        }
        .shopName{
          height: 10vw;
          line-height: 10vw;
          .orderNumber{
            float: left;
          }
          .orderStatus{
            float: right;
          }
        }
        .commodity{
          font-size: @h3_font_size;
          a{
            margin: 2.6vw 0vw;
            display: block;
            color: @color7;
            overflow: hidden;
            zoom:1;
            .goods_img{
              width: 13.6vw;
              height: 13.6vw;
              border-radius: 1vw;
              float: left;
            }
            .goodsname_main{
              width: 50vw;
              text-align: left;
              float: left;
              line-height: 5vw;
              margin-left: 2vw;
            }
            .goods_pirce,.goods_num{
              float: right;
              text-align: right;
              width: 25vw;
              line-height: 5vw;
            }
          }
        }
        .total{
            width:@width;
            height: 10vw;
            line-height: 10vw;
            margin: 0 auto;
            border-bottom: solid 1px @color8;
            text-align: right;
            span{
              color: @color;
            }
          }
        .operation{
          width: 100%;
          height: 10vw;
          border-bottom: solid 1px @color8;
          overflow: hidden;
          zoom:1;
          .update,.notsj_btn{
            padding: 1.5vw 4vw;
            border-radius: 1vw;
            border: solid 1px @color;
            margin-right: 4vw;
            margin-top: 1vw; 
            float: right;
          }
          .update{
            
          }
          .notsj_btn{}
        }
      }
    }
  }
</style>